<template>
    <div style="padding:8px;">
      <van-skeleton style="margin-top: 15px" title :row="20" :loading="loading">
        <div v-if="zizhi.length == 0">
          <van-empty
            image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
            image-size="120"
            style="margin-top: 40px"
            description="暂无资质"
          />
          <van-divider />
          <div class="spzizhi-addzz">
            <van-button style="width: 130px" type="success" @click="addzizhi"
              >新增资质</van-button
            >
          </div>
        </div>
        <div v-else>
          <div class="zhizhi-xx" v-for="item in zizhi" :key="item.id">
            <img style="width:100%;border-radius:5px;" :src="item.url" alt="">
            <van-button type="danger" size="small" @click="del(item)" block>删除资质</van-button>
          </div>
          <div style="margin-top:10px;">
            <van-button type="success"  @click="addzizhi" block>新增资质</van-button>
          </div>
        </div>
      </van-skeleton>
    </div>
  </template>
  <style>
  .spzizhi-addzz {
    text-align: center;
  }
  .zhizhi-xx{
    padding:8px;
    border-radius:5px;
    border:1px solid #eee;
  }
  </style>
  <script>
  import { defineComponent, reactive, toRefs, watchEffect, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { getGoodsQualifications,deleteQualifications } from "@/api/manage";
  import {
    showSuccessToast,
    showFailToast,
    showLoadingToast,
    showToast,
    showConfirmDialog
  } from "vant";
  export default defineComponent({
    setup() {
      const route = useRoute();
      const router = useRouter();
      const data = reactive({
        id: route.params.id.toString(),
        loading: true,
        zizhi: [],
        //页面数据放置区
      });
      const methods = {
        getzizhi() {
          if(!data.loading){
            showLoadingToast({
            message: "加载中...",
            forbidClick: true,
            loadingType: "spinner",
          });
          }
          getGoodsQualifications({
            id: data.id,
          }).then((res) => {
            data.zizhi = res.data;
            data.loading = false;
          });
        },
      };
      const event = {
        addzizhi() {
          router.push("/shop/addzizhi/" + data.id);
        },
        del(val){
          showConfirmDialog({
            title: "提示",
            message: "确认删除该资质吗?",
          })
            .then(() => {
              showLoadingToast({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
              });
              deleteQualifications({
              id:val.id
              }).then((res) => {
                const newArray = data.zizhi.filter(item => item.id !== val.id);
                data.zizhi=newArray;
                showToast("删除成功");
              });
            })
          
        }
      };
      onMounted(() => {
        methods.getzizhi();
      });
      return {
        ...toRefs(data),
        ...event,
      };
    },
  });
  </script>